<template>
  <Dialog title="详情" v-model="dialogVisible">
    <div class="basic-info">
      <h3 class="info-title">基本信息</h3>
      <div class="info-grid">
        <div class="info-row">
          <span class="info-label">工单号：</span>
          <span class="info-content">{{ formData.docNo }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">序列号：</span>
          <span class="info-content">{{ formData.serialNo }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">返工时间:</span>
          <span class="info-content">{{ dateFormatter(null, null, formData.createTime) }}</span>
        </div>
      </div>

      <div class="info-grid">
        <div class="info-row">
          <span class="info-label">返工数量:</span>
          <span class="info-content">{{ formData.qty }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">物料品号：</span>

          <el-tooltip
            class="item"
            effect="dark"
            :content="formData.materialsNum"
            placement="top-start"
          >
            <span class="info-content">{{ formData.materialsNum }}</span>
          </el-tooltip>
        </div>
        <div class="info-row">
          <span class="info-label">物料名称：</span>
          <span class="info-content">{{ formData.materialsName }}</span>
        </div>
      </div>

      <div class="info-grid">
        <div class="info-row">
          <span class="info-label">物料批次号：</span>
          <span class="info-content">{{
            formData.materialsBatchCode ? formData.materialsBatchCode : '--'
          }}</span>
        </div>

        <div class="info-row">
          <span class="info-label">产线：</span>
          <span class="info-content">
            {{ getLineLabel(formData.lineId) }}
          </span>
        </div>
        <div class="info-row">
          <span class="info-label">工序：</span>
          <span class="info-content">
            {{ formData.processName }}
          </span>
        </div>
      </div>
      <div class="info-grid">
        <div class="info-row">
          <span class="info-label">报工人员：</span>
          <span class="info-content">{{
            formData.reportUserName ? formData.reportUserName : '--'
          }}</span>
        </div>

        <div class="info-row">
          <span class="info-label">检验人员：</span>
          <span class="info-content">
            {{ formData.creatorName }}
          </span>
        </div>
        <div class="info-row">
          <span class="info-label">备注：</span>
          <span class="info-content">
            {{ formData.remark }}
          </span>
        </div>
      </div>
    </div>

    <template #footer>
      <!--      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>-->
      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ReworkApi, ReworkVO } from '@/api/opticore/rework'
import {dateFormatter} from "../../../utils/formatTime";

/** 返工记录 表单 */
defineOptions({ name: 'ReworkForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  serialNo: undefined,
  recordCode: undefined,
  docNo: undefined,
  materialsNum: undefined,
  materialsBatchCode: undefined,
  typeId: undefined,
  lineId: undefined,
  processId: undefined,
  status: undefined,
  remark: undefined,
  reportUserId: undefined,
  reportUserName: undefined,
  creatorName: undefined,
  createTime: undefined,
  materialsName: undefined,
  qty: undefined,
  processName: undefined
})
const formRules = reactive({})
const formRef = ref() // 表单 Ref
let lineList = ref([])

/** 打开弹窗 */
const open = async (type: string, id?: number, productLineList?: any[]) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ReworkApi.getRework(id)
    } finally {
      formLoading.value = false
    }
  }
  lineList.value = productLineList
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ReworkVO
    if (formType.value === 'create') {
      await ReworkApi.createRework(data)
      message.success(t('common.createSuccess'))
    } else {
      await ReworkApi.updateRework(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    serialNo: undefined,
    recordCode: undefined,
    docNo: undefined,
    materialsNum: undefined,
    materialsBatchCode: undefined,
    typeId: undefined,
    lineId: undefined,
    processId: undefined,
    status: undefined,
    remark: undefined,
    reportUserId: undefined,
    reportUserName: undefined,
    creatorName: undefined
  }
  formRef.value?.resetFields()
}
function getLineLabel(lineId) {
  // 确保 lineList.value 是一个有效的数组
  const line = (lineList.value || []).find(item => item.id === lineId);
  return line ? line.label : '';
}
</script>

<style scope>
.basic-info {
  font-family: Arial, sans-serif;
  padding: 20px;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
}

.info-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.info-grid {
  display: flex;
  /* justify-content: space-between; */
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.info-row {
  /* flex: 1; */
  width: 33.3%;
  display: flex;
  margin-right: 10px;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 文字溢出隐藏 */
  text-overflow: ellipsis; /* 出现省略号 */
}

.info-label {
  font-weight: bold;
  color: #666;
  min-width: 100px;
}

.info-content {
  color: #333;
}

.view-link {
  color: #1890ff;
  text-decoration: none;
  margin-left: 5px;
  cursor: pointer;
}

.other-info {
  margin-top: 15px;
}

.other-info .info-content {
  word-break: break-word;
}
</style>
